<template>
<!--  #334157-->
  <el-menu :default-active="activeIndex"
           class="el-menu-vertical-demo"
           unique-opened
           :collapse="collapse"
           text-color="#fff"
           active-text-color="rgb(255, 208, 75)"
           background-color="#063864"
           @select="select">
    <div class="logo_box">
      <el-image class="el-image-logo" :src="logo"
      ></el-image>
    </div>
    <el-submenu v-show="leftnavShow" index="1">
      <template slot="title">
        <i class="el-icon-trophy" style="color: #ffffff"></i>
        <span slot="title">参赛管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="teams">我的比赛</el-menu-item>
        <el-menu-item index="entry">参赛作品</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu v-show="!leftnavShow" index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">比赛管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="managementTeam">我参与的比赛</el-menu-item>
        <el-menu-item v-show="this.showAddJudges" index="AddJudges">添加评委</el-menu-item>
        <el-submenu v-show="this.showAddJudges" index="1-4">
          <template slot="title">比赛发布</template>
          <el-menu-item index="ReleaseGames">发布资讯</el-menu-item>
          <el-menu-item index="InformationRelease">发布比赛</el-menu-item>
          <el-menu-item index="deleteNotify">资讯删除</el-menu-item>
        </el-submenu>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "leftnav",
  data() {
    return{
      leftnavShow: true,
      showAddJudges: true,
      activeIndex: 'teams',
      collapse: false,
      logo: require('../imgs/gx_gamestouming.png')
    }
  },
  methods: {
    select(key){
      this.$router.push('/backIndex/'+key);
    }
  },
  mounted() {
    const level = window.sessionStorage.getItem('level');
    if(level !== '1') this.leftnavShow = false;
    else this.leftnavShow = true;
    if(level === '4' || level === '2') this.showAddJudges = true;
    else this.showAddJudges = false;
    const a = this.$route.path.indexOf('/',11)?this.$route.path.length:this.$route.path.indexOf('/',11)-1;
    if ((this.$route.path.substr(11,a)==='teams') || (this.$route.path.substr(11,a)==='editTeam')) this.activeIndex = 'teams';
    else if((this.$route.path.substr(11,a)==='entry') || (this.$route.path.substr(11,a)==='uploading')) this.activeIndex = 'entry';
    else if((this.$route.path.substr(11,a)==='managementTeam') || (this.$route.path.substr(11,a)==='allTeam') || (this.$route.path.substr(11,a)==='allwork') || (this.$route.path.substr(11,a)==='editAllTeam')) this.activeIndex = 'managementTeam';
    else if((this.$route.path.substr(11,a)==='AddJudges') || (this.$route.path.substr(11,a)==='judges')) this.activeIndex = 'AddJudges';
    else if((this.$route.path.substr(11,a)==='ReleaseGames') || (this.$route.path.substr(11,a)==='uploading')) this.activeIndex = 'ReleaseGames';
    else if((this.$route.path.substr(11,a)==='InformationRelease') || (this.$route.path.substr(11,a)==='uploading')) this.activeIndex = 'InformationRelease';
    else if((this.$route.path.substr(11,a)==='deleteNotify')) this.activeIndex = 'deleteNotify';
  },
  //  路由监听
  watch: {
    $route: {
      handler:function(val) {
        const level = window.sessionStorage.getItem("level");
        if(level !== '1') {
          this.leftnavShow = false;
        }
        else this.leftnavShow = true;
        if(level === '4' || level === '2') this.showAddJudges = true;
        else this.showAddJudges = false;
        const a = val.path.indexOf('/',11)?val.path.length:val.path.indexOf('/',11)-1;
        if ((val.path.substr(11,a)==='teams') || (val.path.substr(11,a)==='editTeam')) this.activeIndex = 'teams';
        else if((val.path.substr(11,a)==='entry') || (val.path.substr(11,a)==='uploading')) this.activeIndex = 'entry';
        else if((val.path.substr(11,a)==='managementTeam') || (val.path.substr(11,a)==='allTeam') || (val.path.substr(11,a)==='allwork')) this.activeIndex = 'managementTeam';
        // else if((val.path.substr(11,a)==='ReleaseGames') || (val.path.substr(11,a)==='uploading')) this.activeIndex = 'ReleaseGames';
        else if((val.path.substr(11,a)==='AddJudges') || (val.path.substr(11,a)==='judges')) this.activeIndex = 'AddJudges';
        else if((val.path.substr(11,a)==='ReleaseGames') || (val.path.substr(11,a)==='uploading')) this.activeIndex = 'ReleaseGames';
        else if((val.path.substr(11,a)==='InformationRelease') || (val.path.substr(11,a)==='uploading')) this.activeIndex = 'InformationRelease';
        else if((this.$route.path.substr(11,a)==='deleteNotify')) this.activeIndex = 'deleteNotify';
      }
    }
  },
  created() {
    this.$root.Bus.$on('toggle', value => {
      this.collapse = !value
      this.logo = value?require('../imgs/gx_gamestouming.png'):require('../imgs/gx_gamestubiao.png');
    })
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo{
  &.el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
  &.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 265px;
    min-height: 400px;
  }
  &.el-menu--collapse{
    width: 100%;
    min-height: 400px;
    border: none;
    text-align: left;
  }
  .logo_box{
    border: none;
    width: 100%;
    height: 61.11px;
    background-color: #063864;
    .el-image-logo{
      height: 60px;
      margin: 0 !important;
      display: inline-block;
      float: left;
    }
  }
}
</style>
